<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/jsp/include/taglib.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta charset="utf-8" />
<title>Form Elements - Ace Admin</title>

<meta name="description" content="Common form elements and layouts" />
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

<!-- bootstrap & fontawesome -->
<link rel="stylesheet"
	href="<%=request.getContextPath()%>/ace/assets/css/bootstrap.min.css" />
<link rel="stylesheet"
	href="<%=request.getContextPath()%>/ace/assets/css/font-awesome.min.css" />

<!-- page specific plugin styles -->
<link rel="stylesheet"
	href="<%=request.getContextPath()%>/ace/assets/css/jquery-ui.custom.min.css" />
<link rel="stylesheet"
	href="<%=request.getContextPath()%>/ace/assets/css/chosen.min.css" />
<link rel="stylesheet"
	href="<%=request.getContextPath()%>/ace/assets/css/bootstrap-datepicker3.min.css" />
<link rel="stylesheet"
	href="<%=request.getContextPath()%>/ace/assets/css/bootstrap-timepicker.min.css" />
<link rel="stylesheet"
	href="<%=request.getContextPath()%>/ace/assets/css/daterangepicker.min.css" />
<link rel="stylesheet"
	href="<%=request.getContextPath()%>/ace/assets/css/bootstrap-datetimepicker.min.css" />
<link rel="stylesheet"
	href="<%=request.getContextPath()%>/ace/assets/css/bootstrap-colorpicker.min.css" />


<!-- ace styles -->
<link rel="stylesheet"
	href="<%=request.getContextPath()%>/ace/assets/css/ace.min.css"
	id="main-ace-style" />

<!--[if lte IE 9]>
			<link rel="stylesheet" href="<%=request.getContextPath()%>/ace/assets/css/ace-part2.min.css" />
		<![endif]-->
<link rel="stylesheet"
	href="<%=request.getContextPath()%>/ace/assets/css/ace-skins.min.css" />
<link rel="stylesheet"
	href="<%=request.getContextPath()%>/ace/assets/css/ace-rtl.min.css" />

<!--[if lte IE 9]>
		  <link rel="stylesheet" href="<%=request.getContextPath()%>/ace/assets/css/ace-ie.min.css" />
		<![endif]-->

<!-- inline styles related to this page -->

<!-- ace settings handler -->
<script
	src="<%=request.getContextPath()%>/ace/assets/js/ace-extra.min.js"></script>

<!-- HTML5shiv and Respond.js for IE8 to support HTML5 elements and media queries -->

<!--[if lte IE 8]>
		<script src="<%=request.getContextPath()%>/ace/assets/js/html5shiv.min.js"></script>
		<script src="<%=request.getContextPath()%>/ace/assets/js/respond.min.js"></script>
		<![endif]-->

<link rel="stylesheet"
	href="<%=request.getContextPath()%>/static/jquery-validate/css/form.css" />
<script type="text/javascript" src="${ctx }/static/js/jquery-1.11.0.min.js"></script>	
<script type="text/javascript" src="${ctx }/static/js/ajaxfileupload.js"></script>
</head>

<body class="no-skin">


	<!-- /section:basics/content.breadcrumbs -->
	<div class="page-content">
		<!-- /section:settings.box -->
		<div class="page-content-area">
			<div class="page-header">
				<h1>咨询师新增</h1>
			</div>
			<!-- /.page-header -->

			<div class="row">
				<div class="col-xs-12">
					<!-- PAGE CONTENT BEGINS -->
					<form id="drizzt-table" class="form-horizontal"
						action="<%=request.getContextPath()%>/bsbCounselor/create.do"
						method="post">
						<!-- #section:elements.form -->
						<div class="form-group">
							<label class="col-sm-3 control-label no-padding-right"
								for="form-field-1"> 头像 </label>

							<div class="col-sm-9">
								<img id="imageRotation" alt="" width="100px" height="100px">
								<input type="file" id="file" onchange="ajaxFileUpload()"
									name="file" /> <input type="hidden" name="headImg"
									id="rotation">
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-3 control-label no-padding-right muted"
								for="form-field-1"> 姓名 </label>

							<div class="col-sm-9">
								<input type="text"   placeholder="姓名"
									name="name" class="col-xs-10 col-sm-5" />
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-3 control-label no-padding-right"
								for="form-field-1"> 手机号 </label>

							<div class="col-sm-6">
								<input type="text"  placeholder="手机号" id="phone"
									name="phone" class="col-xs-10 col-sm-5" tip="请输入手机号"/>
									&nbsp;&nbsp;
								<button  class="btn btn-sm btn-primary" id="btnCode" onclick="javascript:sendSms('#'+this.id)"  >获取</button>
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-3 control-label no-padding-right"
								for="form-field-1"> 验证码 </label>

							<div class="col-sm-6">
								<input type="text" placeholder="短信验证码" name="code"
									class="col-xs-10 col-sm-5" tip="请输入短信验证码"/>
							</div>
						</div>
						
						<div class="form-group">
							<label class="col-sm-3 control-label no-padding-right"
								for="form-field-1"> 相关执业资格 </label>

							<div class="col-sm-9">
								
								<c:forEach items="${titles }" var="title">
									<input type="checkbox"  name="duty" value="${title.index }">&nbsp;${title.name }
								</c:forEach>
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-3 control-label no-padding-right"
								for="form-field-1"> 其他执业资格 </label>

							<div class="col-sm-9">
								<input type="text"   placeholder="默认空格或逗号隔开"
									name="positiotn" class="col-xs-10 col-sm-5" />
							</div>
						</div>


						<div class="form-group">
							<label class="col-sm-3 control-label no-padding-right"
								for="form-field-1"> 擅长业务 </label>

							<div class="col-sm-9">
								<input type="text"   placeholder="擅长业务"
									name="skill" class="col-xs-10 col-sm-5" />
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-3 control-label no-padding-right"
								for="form-field-1"> 一对一咨询金额 </label>

							<div class="col-sm-9">
								<input type="text"   placeholder="一对一咨询金额"
									name="advisoryPrice" class="col-xs-10 col-sm-5" />
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-3 control-label no-padding-right"
								for="form-field-1"> 收费标准 </label>

							<div class="col-sm-9">
								<input type="text"   placeholder="收费标准"
									name="quote" class="col-xs-10 col-sm-5" />
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-3 control-label no-padding-right"
								for="form-field-1"> 个人简介 </label>

							<div class="col-sm-9">
								<input type="text" placeholder="个人简介" name="profile"
									value="${bsbUser.profile}" class="col-xs-10 col-sm-5" />
							</div>
						</div>

						<div class="form-group">
							<label class="col-sm-3 control-label no-padding-right"
								for="form-field-1"> 密码 </label>

							<div class="col-sm-6">
								<input type="password" id="password"  placeholder="初始密码" tip="请输入初始登录密码"
									name="pwd" class="col-xs-10 col-sm-5" />
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-3 control-label no-padding-right"
								for="form-field-1"> 确认密码 </label>

							<div class="col-sm-6">
								<input type="password"   placeholder="确认密码" tip="请确认初始登录密码"
									name="confirm_password" class="col-xs-10 col-sm-5" />
							</div>
						</div>
						<div class="clearfix form-actions">
							<div class="col-md-offset-3 col-md-9">
								<input class="btn btn-info" type="submit" value="提交" /> &nbsp;
								&nbsp; &nbsp; <input type="button" class="btn btn-info"
									onclick="location.href='<%=request.getContextPath()%>/bsbCounselor/list.do'"
									value="返回" />
							</div>
						</div>
					</form>

					<!-- PAGE CONTENT ENDS -->
				</div>
				<!-- /.col -->
			</div>
			<!-- /.row -->
		</div>
		<!-- /.page-content-area -->
	</div>
	<!-- /.page-content -->
</body>

<!-- basic scripts -->

<!--[if !IE]> -->
<script type="text/javascript">
	window.jQuery
			|| document
					.write("<script src='<%=request.getContextPath()%>/ace/assets/js/jquery.min.js'>"
							+ "<"+"/script>");
</script>

<!-- <![endif]-->

<!--[if IE]>
<script type="text/javascript">
 window.jQuery || document.write("<script src='<%=request.getContextPath()%>/ace/assets/js/jquery1x.min.js'>"+"<"+"/script>");
</script>
<![endif]-->
<script type="text/javascript">
	if ('ontouchstart' in document.documentElement)
		document.write("<script src='<%=request.getContextPath()%>/ace/assets/js/jquery.mobile.custom.min.js'>"
						+ "<"+"/script>");
</script>

<script src="<%=request.getContextPath()%>/ace/assets/js/bootstrap.min.js"></script>

<script src="<%=request.getContextPath()%>/static/jquery-validate/js/jquery.validate.js" type="text/javascript"></script>
<script src="<%=request.getContextPath()%>/static/jquery-validate/js/jquery.validate.extend.js" type="text/javascript"></script>
<script src="<%=request.getContextPath()%>/static/jquery-validate/js/additional-methods.js" type="text/javascript"></script>
<script src="<%=request.getContextPath()%>/ace/assets/js/bootbox.js"></script>
<script type="text/javascript">
	  $().ready(function() {
		  $("#drizzt-table").validate({
		    rules: {
		    	name :{
		    		 required : true
		    	},
		    	 phone : {
		             required : true,
		             minlength : 11,
		             // 自定义方法：校验手机号在数据库中是否存在
		             remote : "<%=request.getContextPath()%>/checkPhoneExist",
		             isMobile : true
		         },
		         code : {
		             digits : true,
		             required : true
		         },
		         duty :{
		        	 required : true
		         },
		         advisoryPrice :{
		        	 required : true,
		        	 min:0,
		        	 number : true
		         },
		         positiotn :{
		        	 maxlength:30
		         },
		         skill :{
		        	 maxlength:300
		         },
		         pwd  : {
		        	 required : true,
		        	 rangelength:[6,8]
		         },
		         confirm_password: {
		             required: true,
		             rangelength:[6,8],
		             equalTo: "#password"
		           }
		   },
		         messages: {
		        	 name :{
			    		 required : "请输入姓名"
			    	},
		        	 phone : {
		                 required : "请输入手机号",
		                 minlength : "确认手机号不能小于11个字符",
		                 isMobile : "请正确填写您的手机号码",
		                 remote : "该手机号已存在"
		             },
		            
		             code : {
		                 required : "请输入验证码",
		                 digits : "验证码应该输入数字"
		             },
		             duty :{
			        	 required : "请选择其他职业资格"
			         },
			         advisoryPrice :{
			        	 required : "请填写一对一咨询金额",
			        	 min:"不能小于0",
			        	 number : "必须输入合法数字"
			         },
			         positiotn :{
			        	 maxlength:$.validator.format( "最多输入 {0} 个字符." )
			         },
			         skill :{
			        	 maxlength:$.validator.format( "最多输入 {0} 个字符." )
			         },
		             pwd : {
		                 required : "请输入密码",
		                 rangelength: $.validator.format("请输入长度在 {0} 到 {1} 之间的字符串")
		             },
		             confirm_password: {
		                 required: "请输入密码",
		                 rangelength: $.validator.format("请输入长度在 {0} 到 {1} 之间的字符串"),
		                 equalTo: "两次密码输入不一致"
		               }
		   },
			submitHandler: function(form) {
			     $.ajax({
			    	url : "<%=request.getContextPath()%>/bsbCounselor/create",
			    	type : 'POST',
			    	dataType : "json",
			    	data :  $("#drizzt-table").serialize(),
			    	success : function(data) {
				    	if(data.status){
				    		bootbox.alert(data.msg);
				    		window.location.href="<%=request.getContextPath()%>/bsbCounselor/list";
				    	}else{
				    		bootbox.alert(data.msg);
				    	}
			    	}
			    	});
			     return false;
			   }
		   
		     });
		 });
//手机号码验证
jQuery.validator.addMethod("isMobile", function(value, element) {
    var length = value.length;
    var mobile = /^(13[0-9]{9})|(18[0-9]{9})|(14[0-9]{9})|(17[0-9]{9})|(15[0-9]{9})$/;
    return this.optional(element) || (length == 11 && mobile.test(value));
}, "请正确填写您的手机号码");


function invokeSettime(obj){
    var countdown=60;
    settime(obj);
    function settime(obj) {
        if (countdown == 0) {
            $(obj).attr("disabled",false);
            $(obj).text("获取");
            countdown = 60;
            return;
        } else {
            $(obj).attr("disabled",true);
            $(obj).text("(" + countdown + ") s 重新获取");
            countdown--;
        }
        setTimeout(function() {
                    settime(obj) }
                ,1000)
    }
}
function ajaxSend(){
	var phone = $("#phone").val();
	var pa = /^[1][3,4,5,7,8][0-9]{9}$/;
	if(!pa.test(phone)){
		bootbox.alert("手机号格式不正确");
		return;
	}
	$.ajax({
        type: "POST",
        url: "<%=request.getContextPath()%>/sendSms/"+phone,
        data: {},
        dataType: "json",
        success: function(data){
                   if(data){
                   	bootbox.alert("发送成功")
                   }else{
                       bootbox.alert(data)
                   }
                 },
        fail: function(data){
       	 bootbox.alert("系统繁忙，请联系管理员")
                 }
    });
}

function sendSms(obj){
	var phone = $("#phone").val();
	var patten = /^1(3|4|5|7|8)\d{9}$/;
	if(!patten.test(phone)){
		bootbox.alert("手机号格式不正确");
		return;
	}
	$.ajax({
        type: "POST",
        url: "<%=request.getContextPath()%>/checkPhoneExist?phone="+phone,
        data: {},
        dataType: "json",
        success: function(data){
                   if(!data){//手机号判重
                   	bootbox.alert("该手机号已存在")
                   	return;
                   }else{//倒计时开始，发送短信
						new invokeSettime(obj);
						ajaxSend();
                   }
                 },
        fail: function(data){
       	 bootbox.alert("系统繁忙，请联系管理员")
       	 return;
                 }
    });
}

</script>
<script type="text/javascript">
function ajaxFileUpload(){
	$.ajaxFileUpload({
		url:'<%=request.getContextPath()%>/uploadimage', //上传的地址
		fileElementId:'file',//上传文件的id
		dataType: {},
		success: function (data){
			$("#rotation").val(data);
			$("#imageRotation").attr("src","${ctx}/getPic/"+data);
		}
	})
}
</script>
</html>
